/*
 * @Author: YuanSong
 * @Date: 2021-11-25 09:49:09
 * @Last Modified by: YuanSong
 * @Last Modified time: 2021-12-02 21:54:39
 */
import React from "react";
import Navbar from "@components/Navbar";
import { withRouter, RouteComponentProps } from "react-router-dom";
import { INormalPageProps } from "@/typings/normalPage";
import { IGlobalReduceState } from "@redux/reducers/global";
import { connect } from "react-redux";
import { AppState } from "@redux/reducers";
import Loading from '@components/Loading';
import Navigation from '@components/Navigation/index'

type IPops = RouteComponentProps & INormalPageProps & IGlobalReduceState ;
class NormalPage extends React.Component<IPops> {
    constructor(props:any){
        super(props);
        this.handleNavItemClick = this.handleNavItemClick.bind(this);
    }
    static defaultProps = {
        showHeader: true,
    };
    
    handleNavItemClick(index:number){
        this.props.handleNavItemClick && this.props.handleNavItemClick(index);
    }
    render() {
        const {
            showHeader,
            showFooter,
            customFooter,
            children,
            showRightNavigation,
            RightNavConfig
          } = this.props;
        return (
            <div className="NormalPage-Component-Wrapper">
                {/** 头部 */}
                {showHeader &&
                    <header className="NormalPage-Header-Wrapper">
                        <Navbar />
                    </header>
                }
                <Loading isLoading={this.props.isLoading} />
                <div className="Main-Nav-Wrapper">
                    <main className="NormalPage-Content-Wrapper">{children}</main>
                    <nav className="NormalPage-Nav-Wrapper">
                        {showRightNavigation && RightNavConfig &&
                            <Navigation RightNavConfig={RightNavConfig} handleNavItemClick={this.handleNavItemClick}/>}
                    </nav>
                </div>
                
                
            </div>
            
        );
    }
}

export default connect((state: AppState) => state.global)(
  /** 默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用 函数跳转 的写法，执行this.props.history.push('/detail')跳转到对应路由的页面
然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props
*/
  withRouter(NormalPage)
);
